<template>
  <h2>Options API</h2>
  <div flex justify-center>
    <span mx-5>{{ store1.count }}</span>
    <button block rounded-lg @click="handleClick">累计</button>
    <span mx-5>{{ store2.count }}</span>
  </div>
  <button mt-5 rounded-lg @click="getStoreData">获取值</button>
  <h2>Composition API</h2>
  <div flex justify-center>
    <span mx-5>{{ store3.count }}</span>
    <button block rounded-lg @click="handleChange">改变</button>
    <span mx-5>{{ store3.doubleCount }}</span>
  </div>
</template>

<script lang="ts" setup>
import { counterStore1, counterStore2, counterStore3 } from "/@/stores/counter";
const store1 = counterStore1();
const store2 = counterStore2();
const store3 = counterStore3();

const handleClick = () => {
  store1.increment();
  store2.increment();
};

const handleChange = () => {
  store3.changeCount(6).then(() => {
    console.log("ok");
  });
};

const getStoreData = () => {
  console.log("count1", store1.getCount, "count2", store2.getCount);
};
</script>
